<template>
    <div id="energy-structure">
        <div class="energy-structure-one">
            <div class="one0">
                <div class="one1">
                    <p>可再生能源装机比重</p>
                </div>
                <div class="one2">
                    <div class="one3">
                        <img src="../assets/img/energystructure/blue.png" alt="">
                    </div>
                    <div class="one4">
                        <p>同比：<span><img v-if="this.show11==true" src="../assets/img/energystructure/up.png" alt=""><img
                                v-else-if="this.show11==false" src="../assets/img/energystructure/down.png"
                                alt=""></span>&nbsp;{{monthRate11}}%</p>
                        <br/>
                        <p>环比：<span><img v-if="this.show12==true" src="../assets/img/energystructure/up.png" alt=""><img
                                v-else-if="this.show12==false" src="../assets/img/energystructure/down.png"
                                alt=""></span>&nbsp;{{yearRate11}}%</p>
                    </div>
                </div>
                <div class="one5">
                    <p>
                        <span>{{installRate11}}%&nbsp;</span>
                        <span>比2020年目标：</span>
                        <span>{{targetRate11}}%</span>
                    </p>
                </div>
                <div class="one6">
                    <p>全国占比&nbsp;&nbsp;&nbsp;&nbsp;{{countryRate11}}%</p>
                    <br/>
                    <van-progress color="rgb(60,128,233)" :percentage="percent11" track-color="#D9E7FF" pivot-text=" "
                                  stroke-width="6px"/>
                </div>
            </div>
            <div id="energystructureoneperecharts" class="one7">

            </div>
        </div>
        <div class="energy-structure-two">
            <div class="tab">
                <van-tabs v-model="two" type="card">
                    <van-tab title="煤炭生产占比" name="a" onclick="firetab(0)"></van-tab>
                    <van-tab title="火电装机占比" name="b" onclick="firetab(1)"></van-tab>
                </van-tabs>
            </div>
            <div v-show="two == 'a'" class="two00">
                <div class="two0">
                    <div class="two1">
                        <div class="two2">
                            <img src="../assets/img/energystructure/green.png" alt="">
                        </div>
                        <div class="two3">
                            <p>同比：<span><img v-if="this.show21==true" src="../assets/img/energystructure/up.png" alt=""><img
                                    v-else-if="this.show21==false" src="../assets/img/energystructure/down.png" alt=""></span>&nbsp;{{monthRate21}}%
                            </p>
                            <br/>
                            <p>环比：<span><img v-if="this.show22==true" src="../assets/img/energystructure/up.png" alt=""><img
                                    v-else-if="this.show22==false" src="../assets/img/energystructure/down.png" alt=""></span>&nbsp;{{yearRate21}}%
                            </p>
                        </div>
                    </div>
                    <div class="two4">
                        <p><span>{{wholeRate21}}%&nbsp;</span>比2020年目标：{{targetRate21}}%</p>
                    </div>
                    <div class="two5">
                        <p>全国占比&nbsp;&nbsp;&nbsp;&nbsp;{{countryRate21}}%</p>
                        <br/>
                        <van-progress color="#25D096" :percentage="percent21" track-color="#D3F6EA" pivot-text=""
                                      stroke-width="6px"/>
                    </div>
                </div>
                <div id="energystructuretwolineecharts" class="two6">

                </div>
            </div>
            <div v-show="two == 'b'" class="two01">
                <div class="two7">
                    <div class="two8">
                        <div class="two9">
                            <img src="../assets/img/energystructure/orange.png" alt="">
                        </div>
                        <div class="two10">
                            <p>同比：<span><img v-if="this.show31==true" src="../assets/img/energystructure/up.png" alt=""><img
                                    v-else-if="this.show31==false" src="../assets/img/energystructure/down.png" alt=""></span>&nbsp;{{monthRate22}}%
                            </p>
                            <br/>
                            <p>环比：<span><img v-if="this.show32==true" src="../assets/img/energystructure/up.png" alt=""><img
                                    v-else-if="this.show32==false" src="../assets/img/energystructure/down.png" alt=""></span>&nbsp;{{yearRate22}}%
                            </p>
                        </div>
                    </div>
                    <div class="two11">
                        <p><span>{{wholeRate22}}%&nbsp;</span>比2020年目标：{{targetRate22}}%</p>
                    </div>
                    <div class="two12">
                        <p>全国占比&nbsp;&nbsp;&nbsp;&nbsp;{{countryRate22}}%</p>
                        <br/>
                        <van-progress v-if="two == 'b'" color="#FE6B40" :percentage="percent22" track-color="#FDD0C3" pivot-text=""
                                      stroke-width="6px"/>
                    </div>
                </div>
                <div id="energystructuretwobarecharts" class="two13">

                </div>
            </div>
        </div>
        <div class="energy-structure-three">
            <div>
                <van-tabs v-model="three" type="card" class="tab">
                    <van-tab title="分地区能源生产与消费数量" name="a"></van-tab>
                    <van-tab title="分企业能源生产量" name="b"></van-tab>
                </van-tabs>
            </div>
            <div v-show="three == 'a'">
                <div>
                    <div>
                        <p>
                            生产
                        </p>
                        <p>
                            消费
                        </p>
                    </div>
                    <div>
                        <li>
                            <p><span style="background:#4273FD"></span>&nbsp;煤炭</p>
                            <p><span style="background:#21BDB6"></span>&nbsp;天然气</p>
                            <p><span style="background:#29F5CA"></span>&nbsp;石油</p>
                            <p><span style="background:#63FFFF"></span>&nbsp;电力</p>
                        </li>
                        <li>
                            <p><span style="background:#FF3129"></span>&nbsp;煤炭</p>
                            <p><span style="background:#FE5857"></span>&nbsp;天然气</p>
                            <p><span style="background:#FF9C29"></span>&nbsp;石油</p>
                            <p><span style="background:#FEC532"></span>&nbsp;电力</p>
                        </li>
                    </div>
                </div>
                <div id="energystructurethreebarecharts1">

                </div>
            </div>
            <div v-show="three == 'b'">
                <div id="energystructurethreebarecharts2" class="bar2">
                </div>
            </div>
        </div>
        <div class="energy-structure-four">
            <div id="energystructurefourperecharts">
            </div>
        </div>
        <div class="energy-structure-five">
            <div>
                <van-tabs v-model="five" type="card" class="tab">
                    <van-tab title="分品种能源消费量" name="a"></van-tab>
                    <van-tab title="分行业能源消费量" name="b"></van-tab>
                    <van-tab title="分用户能源消费量" name="c"></van-tab>
                </van-tabs>
            </div>
            <div v-show="five == 'a'">
                <div id="energystructurefiveperecharts" class="per">
                </div>
            </div>
            <div v-show="five == 'b'">
                <div id="energystructurefivebarecharts1" class="bar1">
                </div>
            </div>
            <div v-show="five == 'c'">
                <div id="energystructurefivebarecharts2" class="bar2">
                </div>
            </div>
        </div>
        <div class="energy-structure-six">
            <div>
                <van-tabs v-model="six" type="card" class="tab">
                    <van-tab title="电力占终端能源消费比重" name="a"></van-tab>
                    <van-tab title="煤炭终端消费比重" name="b"></van-tab>
                </van-tabs>
            </div>
            <div v-show="six == 'a'" class="six0">
                <div class="six1">
                    <div class="six2">
                        <img src="../assets/img/energystructure/yellow.png" alt="">
                    </div>
                    <div class="six3">
                        <p class="p1">{{installRate61}}%</p>
                        <p class="p2">电力占终端能源消费比重</p>
                    </div>
                </div>
                <div class="six4">
                    <div class="six5">
                        <div class="six6">
                            <p>同比：<span><img v-if="this.show41==true" src="../assets/img/energystructure/up.png" alt=""><img
                                    v-else-if="this.show41==false" src="../assets/img/energystructure/down.png" alt="">&nbsp;{{monthRate61}}%</span>
                            </p>
                            <br/>
                            <p>占比：{{yearRate61}}%</p>
                            <br/>
                            <p>排名：{{paiming}}</p>
                        </div>
                    </div>
                </div>
            </div>
            <div v-show="six == 'b'" class="six01">
                <div class="six7">
                    <div class="six8">
                        <div class="six9">
                            <img src="../assets/img/energystructure/orange.png" alt="">
                        </div>
                        <div class="six10">
                            <p>同比：<span><img v-if="this.show51==true" src="../assets/img/energystructure/up.png" alt=""><img
                                    v-else-if="this.show51==false" src="../assets/img/energystructure/down.png" alt=""></span>&nbsp;{{monthRate62}}%
                            </p>
                            <br/>
                            <p>环比：<span><img v-if="this.show52==true" src="../assets/img/energystructure/up.png" alt=""><img
                                    v-else-if="this.show52==false" src="../assets/img/energystructure/down.png" alt=""></span>&nbsp;{{yearRate62}}%
                            </p>
                        </div>
                    </div>
                    <div class="six11">
                        <p><span>{{wholeRate62}}%&nbsp;</span>比2020年目标：{{targetRate62}}%</p>
                    </div>
                    <div class="six12">
                        <p>全国占比&nbsp;{{countryRate62}}%</p>
                        <br/>
                        <van-progress v-if="six == 'b'" color="#FE6B40" :percentage="percent62" track-color="#FDD0C3" pivot-text=""
                                      stroke-width="6px"/>
                    </div>
                </div>
                <div id="energystructuresixbarecharts" class="six13">

                </div>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                //红绿箭头
                show11: true,
                show12: true,
                show21: true,
                show22: true,
                show31: true,
                show32: true,
                show41: true,
                show51: true,
                show52: true,
                //可再生能源装机比重
                monthRate11: '+1.1',
                yearRate11: '1.38',
                installRate11: '30',
                targetRate11: '-2.1',
                countryRate11: '10',
                percent11: "10",
                //煤炭生产占比
                monthRate21: '+1.1',
                yearRate21: '1.38',
                wholeRate21: '18',
                targetRate21: '-2.1',
                countryRate21: '7',
                percent21: "7",
                //火电装机占比
                monthRate22: '+1.1',
                yearRate22: '1.38',
                wholeRate22: '13',
                targetRate22: '-2.1',
                countryRate22: '10',
                percent22: "10",
                //电力占终能源消费比重
                installRate61: '13',
                monthRate61: '+1.1',
                yearRate61: '1.38',
                paiming: '11',
                //煤炭终端消费比重
                monthRate62: '+1.1',
                yearRate62: '1.38',
                wholeRate62: '13',
                targetRate62: '-2.1',
                countryRate62: '10',
                percent62: "10",
                //tab切换
                two: 'a',
                three: 'a',
                five: 'a',
                six: 'a',
                //可再生能源装机比重 环形图
                energystructureoneperecharts: {
                    tooltip: {
                        confine:true,
                        trigger: "item",
                        formatter: "{b}<br/> {c}亿吨标煤({d}%)",
                        textStyle: {
                            //color: "#B3C9E1",
                            fontSize: 14
                        }
                    },
                    color: [
                        "#10EFEF",
                        "#FFD651",
                        "#00A5FE"
                    ],
                    legend: {
                        icon: "circle",
                        itemGap: 12,
                        itemWidth: 4.35,
                        itemHeight: 4.35,
                        textStyle: {
                            fontfamily: "MicrosoftYaHeiLight",
                            color: "#878B96",
                            fontSize: 10
                        },
                        orient: "horizontal",
                        left: "right",
                        top: "top",
                        padding: [
                            30,
                            15,
                            0,
                            0
                        ],
                        data: [
                            "风",
                            "光",
                            "水"
                        ]
                    },
                    series: [
                        {
                            name: "",
                            center: ["50%", "55%"],
                            type: "pie",
                            radius: [
                                "30%",
                                "45%"
                            ],
                            labelLine: {
                                "normal": {
                                    show: "true",
                                    length: 10,
                                    length2: 40,
                                    lineStyle: {
                                        width: 1
                                    }
                                }
                            },
                            label: {
                                normal: {
                                    formatter: (params) => {
                                        // console.log(params);
                                        return '{per|' + params.percent.toFixed(2) + '%}' + '{c|\n' + params.value + '亿吨标煤' + '}'
                                    },
                                    borderRadius: 4,
                                    padding: [0, -50],
                                    height: 25,
                                    fontSize: 10,
                                    align: 'center',
                                    rich: {
                                        per: {
                                            fontSize: 12,
                                            fontWeight: "bold",
                                            color: '#9C9DA2'
                                        },
                                        c: {
                                            fontSize: 8,
                                            color: '#9C9DA2',
                                            padding: [7, 3],
                                            //height: 40,
                                        }
                                    }
                                }

                            },
                            data: [
                                {
                                    value: 45,
                                    name: "风"
                                },
                                {
                                    value: 15,
                                    name: "光"
                                },
                                {
                                    value: 40,
                                    name: "水"
                                }
                            ]
                        }
                    ]
                },
                //火电装机占比 柱状图
                energystructuretwobarecharts: {
                    color: {
                        type: 'linear',  //线性渐变 radial径向渐变
                        x: 0, y: 0, x2: 0, y2: 1,
                        colorStops: [
                            {
                                offset: 0.3,
                                color: "#74B0FF" // 100% 处的颜色
                            },
                            {
                                offset: 1,
                                color: "#7496FF" // 100% 处的颜色
                            }],
                        globalCoord: false // 缺省为 false
                    },
                    textStyle: {
                        color: 'rgb(222,222,222)',
                    },
                    tooltip: {
                        confine:true,
                        trigger: 'axis',
                        formatter: "{b}月<br/>{a} : {c}%",
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    grid: {
                        left: '0%',
                        right: '10%',
                        bottom: '5%',
                        top: '20%',
                        containLabel: true
                    },

                    xAxis: [{
                        name: '月',
                        show: true,
                        nameTextStyle: {
                            color: '#AAB4C6',
                            fontSize: 8,
                            padding: [24, 0, 0, -15]
                        },
                        data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
                        axisTick: {
                            show: false
                        },
                        // x轴的字体样式
                        axisLabel: {
                            show: true,
                            interval: 0,
                            textStyle: {
                                color: '#AAB4C6',
                                fontSize: '8'
                            }
                        },
                        // 控制网格线是否显示
                        splitLine: {
                            show: false,
                            //  改变轴线颜色
                            lineStyle: {
                                // 使用深浅的间隔色
                                color: ['red']
                            }
                        },
                        // x轴的颜色和宽度
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: '#DADADA',
                                width: 1   //这里是坐标轴的宽度,可以去掉
                            }
                        }
                    }],
                    yAxis: [
                        {
                            type: 'value',
                            // max:100,
                            // min:0,

                            // interval:25,
                            name: '%',
                            nameTextStyle: {
                                fontSize: 10,
                                color: '#AAB4C6',
                                padding: [0, 20, -10, 0]
                            },
                            axisTick: {
                                show: false
                            },
                            // x轴的字体样式
                            axisLabel: {
                                show: true,
                                formatter: '{value}',
                                interval: 0,
                                textStyle: {
                                    color: '#AAB4C6',
                                    fontSize: '8'
                                }
                            },
                            // 控制网格线是否显示
                            splitLine: {
                                show: true,
                                //  改变轴线颜色
                                lineStyle: {
                                    // 使用深浅的间隔色
                                    color: '#DADADA',
                                    width: 0.5,
                                }
                            },
                            // x轴的颜色和宽度
                            axisLine: {
                                show: true,
                                lineStyle: {
                                    color: '#DADADA',
                                    width: 1   //这里是坐标轴的宽度,可以去掉
                                }
                            }
                        }
                    ],
                    series: [
                        {
                            name: '火电装机占比',
                            center: ["50%", "50%"],
                            type: 'bar',
                            barGap: 5,
                            barWidth: 5,
                            barCategoryGap: '60%',
                            stack: 1,
                            itemStyle: {
                                normal: {
                                    barBorderRadius: [10, 10, 0, 0],
                                }
                            },
                            data: [75, 55, 50, 40, 70, 65, 35, 65, 75, 55, 50, 40],

                        }
                    ]
                },
                //煤炭生产占比  折线图
                energystructuretwolineecharts: {
                    textStyle: {
                        color: '#015868'
                    },
                    grid: {
                        left: '0%',
                        right: "11%",
                        bottom: '5%',
                        top: "20%",
                        containLabel: true
                    },
                    tooltip: {
                        confine:true,
                        trigger: 'axis',
                        formatter: "{b}月<br/>{a} : {c}%",
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    xAxis: {
                        name: '月',
                        show: true,
                        nameTextStyle: {
                            color: '#AAB4C6',
                            fontSize: 8,
                            padding: [24, 0, 0, -10]
                        },
                        type: 'category',
                        data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
                        axisTick: {show: false},
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: "#DADADA",
                            }
                        },
                        boundaryGap: false,       //坐标轴两边留白    true false 是否留白
                        axisLabel: {
                            color: '#AAB4C6',
                            interval: 0,     //坐标值间隔    强制显示所有文字
                            textStyle: {
                                fontSize: 8
                            }
                        }
                    },
                    yAxis: [
                        {
                            name: '%',
                            nameTextStyle: {
                                fontSize: 10,
                                color: '#AAB4C6',
                                padding: [0, 20, -10, 0]
                            },
                            // min: 0,
                            // max: 100,
                            // interval:25,
                            axisLabel: {
                                formatter: '{value}',
                                color: '#AAB4C6',
                                interval: 0,
                                textStyle: {
                                    fontSize: 8
                                }
                            },
                            show: true,
                            axisLine: {
                                show: true,
                                lineStyle: {
                                    color: "#DADADA",
                                }
                            },
                            axisTick: {show: false},
                            splitLine: {
                                show: true,
                                lineStyle: {
                                    color: '#DADADA',
                                    width: 0.5
                                }
                            },
                        }],
                    series: [
                        {

                            name: "煤炭生产占比",
                            data: [62.5, 75, 50, 40, 55, 50, 78, 60, 75, 60, 50, 40],
                            type: 'line',
                            symbol: 'none',
                            smooth: true,
                            sampling: 'average',
                            center: ["80%", "50%"],
                            emphasis: {
                                itemStyle: {
                                    borderColor: "#29C6FE",
                                    borderWidth: 1,
                                }
                            },
                            color: '#29C6FE',
                            itemStyle: {
                                normal: {
                                    lineStyle: {
                                        color: '#29C6FE',
                                        width: 2,
                                        shadowBlur: 8,
                                        shadowOffsetY: 2
                                    },
                                }
                            },
                            areaStyle: {  //折线图下方的颜色
                                normal: {
                                    color: {
                                        type: 'linear',  //线性渐变 radial径向渐变
                                        x: 0, y: 0, x2: 0, y2: 1,
                                        colorStops: [{
                                            offset: 0,
                                            color: "#0B80BD" // 0% 处的颜色
                                        }, {
                                            offset: 0.3,
                                            color: "rgba(11, 128, 189, 0.5)" // 100% 处的颜色
                                        },
                                            {
                                                offset: 1,
                                                color: "rgba(11, 128, 189, 0.05)" // 100% 处的颜色
                                            }],
                                        globalCoord: false // 缺省为 false
                                    }
                                }
                            },
                            textStyle: {
                                color: 'rgb(179,202,232)'
                            },
                        },
                    ],
                },
                //分地区能源与消费数量 横向柱状图
                energystructurethreebarecharts1: {
                    tooltip: {
                        confine:true,
                        trigger: "axis",
                        axisPointer: {
                            type: "shadow"
                        }
                    },
                    grid: {
                        left: "3%",
                        right: "4%",
                        bottom: "5%",
                        top: "10%",
                        containLabel: true
                    },
                    xAxis: {
                        // min:0,
                        // max:1,
                        type: "value",
                        axisTick: {
                            show: false
                        },
                        axisLabel: {
                            show: false,
                            interval: 0,
                            textStyle: {
                                color: "#AAB4C6",
                                fontSize: 13
                            }
                        },
                        splitLine: {
                            show: false,
                            lineStyle: {
                                color: "red"
                            }
                        },
                        axisLine: {
                            show: false,
                            lineStyle: {
                                color: "#394255",
                                width: 2
                            }
                        }
                    },
                    yAxis: [
                        {
                            name: "地区",
                            nameTextStyle: {
                                padding: [0, 35, -10, 0],
                                fontSize: 10,
                                color: '#B1B1B1'
                            },
                            type: "category",
                            axisTick: {
                                show: false
                            },
                            axisLabel: {
                                show: true,
                                interval: 0,
                                textStyle: {
                                    color: "#B1B1B1",
                                    fontSize: 10
                                }
                            },
                            splitLine: {
                                show: false,
                                lineStyle: {
                                    color: "red"
                                }
                            },
                            axisLine: {
                                show: false,
                                lineStyle: {
                                    color: "#394255",
                                    width: 2
                                }
                            },
                            data: [
                                "巴彦卓尔",
                                "呼伦贝尔",
                                "鄂尔多斯",
                                "通辽",
                                "赤峰",
                                "乌海",
                                "包头",
                                "呼和浩特"
                            ]
                        },
                        {
                            type: 'category',
                            name: '亿吨标煤',
                            // inverse: true,
                            nameTextStyle: {
                                padding: [0, 0, -10, 15],
                                fontSize: 10,
                                color: '#B1B1B1'
                            },
                            axisLine: {
                                show: false,

                            },
                            splitLine: {
                                show: false,

                            },
                            axisTick: {
                                show: false
                            },
                            axisPointer: {
                                label: {
                                    show: true,
                                    margin: 30
                                }
                            },
                            data: [0.77, 0.89, 0.92, 0.97, 0.46, 0.49, 0.69, 0.73, 0.26, 0.44, 0.47, 0.61, 0.36, 0.58, 0.43, 0.69,],
                            axisLabel: {
                                margin: 10,
                                fontSize: 8,
                                color: '#B1B1B1',
                                align: 'left',
                            }
                        }
                        ],
                    series: [
                        {
                            name: "生产煤炭",
                            color: "#4273FD",
                            type: "bar",
                            center: ["50%", "50%"],
                            showBackground: true,
                            backgroundStyle: {
                                color: "RGBA(233,233,233,0.7)"
                            },
                            barWidth: "5",
                            stack: "总量",
                            label: {
                                show: false,
                                position: "insideRight"
                            },
                            data: [
                                0.21,
                                0.22,
                                0.17,
                                0.34,
                                0.24,
                                0.22,
                                0.33,
                                0.32
                            ]
                        },
                        {
                            name: "生产天然气",
                            color: "#21BDB6",
                            type: "bar",
                            stack: "总量",
                            label: {
                                show: false,
                                position: "insideRight"
                            },
                            data: [
                                0.11,
                                0.22,
                                0.17,
                                0.24,
                                0.24,
                                0.32,
                                0.23,
                                0.22
                            ]
                        },
                        {
                            name: "生产石油",
                            color: "#29F5CA",
                            type: "bar",
                            stack: "总量",
                            label: {
                                show: false,
                                position: "insideRight"
                            },
                            data: [
                                0.27,
                                0.32,
                                0.17,
                                0.14,
                                0.24,
                                0.27,
                                0.13,
                                0.32
                            ]
                        },
                        {
                            name: "生产电力",
                            color: "#63FFFF",
                            type: "bar",
                            stack: "总量",
                            label: {
                                show: false,
                                position: "right"
                            },
                            itemStyle: {
                                normal: {
                                    barBorderRadius: [
                                        0,
                                        50,
                                        50,
                                        0
                                    ]
                                }
                            },
                            data: [
                                0.21,
                                0.21,
                                0.17,
                                0.17,
                                0.14,
                                0.22,
                                0.13,
                                0.22
                            ]
                        },
                        {
                            name: "消费煤炭",
                            color: "#FF3129",
                            type: "bar",
                            showBackground: true,
                            backgroundStyle: {
                                color: "RGBA(233,233,233,0.7)"
                            },
                            barWidth: "5",
                            stack: "总量2",
                            label: {
                                show: false,
                                position: "insideRight"
                            },
                            data: [
                                0.15,
                                0.19,
                                0.22,
                                0.21,
                                0.31,
                                0.32,
                                0.23,
                                0.32
                            ]
                        },
                        {
                            name: "消费天然气",
                            color: "#FE5857",
                            type: "bar",
                            stack: "总量2",
                            label: {
                                show: false,
                                position: "insideRight"
                            },
                            data: [
                                0.25,
                                0.19,
                                0.32,
                                0.21,
                                0.31,
                                0.22,
                                0.23,
                                0.12
                            ]
                        },
                        {
                            name: "消费石油",
                            color: "#FF9C29",
                            type: "bar",
                            stack: "总量2",
                            label: {
                                "show": false,
                                "position": "insideRight"
                            },
                            data: [
                                0.15,
                                0.15,
                                0.22,
                                0.16,
                                0.24,
                                0.32,
                                0.19,
                                0.22
                            ]
                        },
                        {
                            name: "消费电力",
                            color: "#FEC532",
                            type: "bar",
                            label: {
                                show: false,
                                position: "insideRight"
                            },
                            stack: "总量2",
                            itemStyle: {
                                normal: {
                                    barBorderRadius: [
                                        0,
                                        50,
                                        50,
                                        0
                                    ]
                                }
                            },
                            data: [
                                0.21,
                                0.19,
                                0.24,
                                0.21,
                                0.17,
                                0.32,
                                0.23,
                                0.27
                            ]
                        }
                    ]
                },
                //分企业能源生产量  横向柱状图
                energystructurethreebarecharts2: {

                    tooltip: {
                        confine:true,
                        trigger: "axis",
                        axisPointer: {
                            type: "shadow"
                        }
                    },
                    grid: {
                        left: "3%",
                        right: "4%",
                        bottom: "5%",
                        containLabel: true
                    },
                    legend: {
                        iron: "rect",
                        itemWidth: 15,
                        itemHeight: 6,
                        textStyle: {
                            color: "#B1B1B1",
                            fontSize: 10
                        },
                        orient: "horizontal",
                        left: "right",
                        padding: [
                            20,
                            15,
                            0,
                            0
                        ],
                        data: [
                            "煤炭",
                            "天然气",
                            "石油",
                            "电力"
                        ]
                    },
                    xAxis: {
                        // min:0,
                        // max:1.5,
                        type: "value",
                        axisTick: {
                            show: false
                        },
                        axisLabel: {
                            show: false,
                        },
                        splitLine: {
                            show: false,
                        },
                        axisLine: {
                            show: false,
                        }
                    },
                    yAxis: [
                        {
                            name: "企业",
                            nameTextStyle: {
                                padding: [0, 35, -10, 0],
                                fontSize: 10,
                                color: '#B1B1B1'
                            },
                            type: "category",
                            axisTick: {
                                show: false
                            },
                            axisLabel: {
                                show: true,
                                interval: 0,
                                textStyle: {
                                    color: "#B1B1B1",
                                    fontSize: 10
                                }
                            },
                            splitLine: {
                                show: false,
                            },
                            axisLine: {
                                show: false,
                            },
                            data: [
                                "蒙能",
                                "华能",
                                "国家电投",
                                "内蒙伊泰",
                                "国家能投",
                                "中海油",
                                "中石油",
                                "中石化"
                            ]
                        },
                        {
                            type: 'category',
                            name: '亿吨标煤',
                            nameTextStyle: {
                                padding: [0, 0, -10, 15],
                                fontSize: 10,
                                color: '#B1B1B1'
                            },
                            axisLine: {
                                show: false,

                            },
                            splitLine: {
                                show: false,

                            },
                            axisTick: {
                                show: false
                            },
                            axisPointer: {
                                label: {
                                    show: true,
                                    margin: 30
                                }
                            },
                            data: [0.77, 0.52, 0.52, 0.77, 0.52, 0.63, 0.21, 0.98],
                            axisLabel: {
                                margin: 10,
                                fontSize: 10,
                                color: '#B1B1B1',
                                align: 'left',
                            }
                        }
                    ],
                    series: [
                        {
                            name: "煤炭",
                            color: "#1863FF",
                            type: "bar",
                            showBackground: true,
                            backgroundStyle: {
                                color: "RGBA(233,233,233,0.7)"
                            },
                            barWidth: "10",
                            stack: "总量",
                            label: {
                                show: false,
                                position: "insideRight"
                            },
                            data: [
                                0.21,
                                0.22,
                                0.17,
                                0.34,
                                0.24,
                                0.22,
                                0.33,
                                0.32
                            ]
                        },
                        {
                            name: "天然气",
                            color: "#428CFF",
                            type: "bar",
                            stack: "总量",
                            barWidth: "10",
                            label: {
                                show: false,
                                position: "insideRight"
                            },
                            data: [
                                0.25,
                                0.32,
                                0.17,
                                0.16,
                                0.34,
                                0.22,
                                0.12,
                                0.39
                            ]
                        },
                        {
                            name: "石油",
                            color: "#29C6FE",
                            type: "bar",
                            stack: "总量",
                            barWidth: "10",
                            label: {
                                show: false,
                                position: "insideRight"
                            },
                            data: [
                                0.21,
                                0.32,
                                0.17,
                                0.24,
                                0.34,
                                0.22,
                                0.13,
                                0.32
                            ]
                        },
                        {
                            name: "电力",
                            color: "#10E7FF",
                            type: "bar",
                            barWidth: "10",
                            stack: "总量",
                            label: {
                                show: false,
                                position: "right"
                            },
                            itemStyle: {
                                normal: {
                                    barBorderRadius: [
                                        0,
                                        50,
                                        50,
                                        0
                                    ]
                                }
                            },
                            data: [
                                0.21,
                                0.30,
                                0.19,
                                0.42,
                                0.34,
                                0.32,
                                0.23,
                                0.32
                            ]
                        },
                    ]
                },
                //一次能源生产概况  环形图
                energystructurefourperecharts: {
                    title: {
                        top: '7%',
                        left: 10,
                        text: '一次能源生产概况',
                        textStyle: {
                            fontfamily: "MicrosoftYaHei",
                            align: 'center',
                            color: '#3A4664',
                            fontSize: 12
                        }
                    },
                    grid: {
                        left: "20%",
                        right: "10%",
                        bottom: "0%",
                        containLabel: true
                    },
                    tooltip: {
                        confine:true,
                        trigger: "item",
                        formatter: "{b}<br/> {c}亿吨标煤 ({d}%)",
                        textStyle: {
                            //color: "#B3C9E1",
                            fontSize: 14
                        }
                    },
                    color: [
                        "#FE5A63",
                        "#09AED8",
                        "#1292F4",
                        "#10EFEF",
                        "#FFD651",
                        "#00A5FE"
                    ],
                    legend: {
                        icon: "rect",
                        itemGap: 15,
                        itemWidth: 5.6,
                        itemHeight: 5.6,
                        textStyle: {
                            color: "#878B96",
                            fontSize: 12
                        },
                        orient: "horizontal",
                        left: "right",
                        data: [
                            "煤炭",
                            "风",
                            "",
                            "原油",
                            "光",
                            "",
                            "天然气",
                            "",
                            "其它非石化能源"

                        ],
                        padding: [
                            60,
                            30,
                            0,
                            0
                        ]
                    },
                    series: [
                        {
                            name: "",
                            type: "pie",
                            center: ["30%", "53%"],
                            radius: [
                                "30%",
                                "45%"
                            ],
                            labelLine: {
                                normal: {
                                    show: "true",
                                    length: 10,
                                    length2: 50,
                                    lineStyle: {
                                        width: 1
                                    }
                                }
                            },
                            label: {
                                normal: {
                                    formatter: (params) => {
                                        //console.log(params);
                                        return '{per|' + params.percent.toFixed(2) + '%}'
                                    },
                                    borderRadius: 4,
                                    padding: [0, -50],
                                    height: 25,
                                    fontSize: 10,
                                    align: 'center',
                                    rich: {
                                        per: {
                                            fontSize: 12,
                                            fontWeight: "bold",
                                            color: '#9C9DA2'
                                        },
                                    }
                                }
                            },
                            data: [
                                {
                                    value: 45,
                                    name: "原油"
                                },
                                {
                                    value: 2,
                                    name: "其他非化石能源"
                                },
                                {
                                    value: 3,
                                    name: "天然气"
                                },
                                {
                                    value: 5,
                                    name: "风"
                                },
                                {
                                    value: 20,
                                    name: "光"
                                },
                                {
                                    value: 25,
                                    name: "煤炭"
                                }
                            ]
                        }
                    ]
                },
                //分品种能源消费量  环形图
                energystructurefiveperecharts: {
                    tooltip: {
                        confine:true,
                        trigger: "item",
                        formatter: "{b}<br/> {c}亿吨标煤 ({d}%)",
                        textStyle: {
                            //color: "#B3C9E1",
                            fontSize: 14
                        }
                    },
                    color: [
                        "#10EFEF",
                        "#FFD651",
                        "#00A5FE",
                        "#FE5A63"
                    ],
                    legend: {
                        icon: "rect",
                        itemGap: 15,
                        itemWidth: 6.5,
                        itemHeight: 6.5,
                        textStyle: {
                            color: "#878B96",
                            fontSize: 12
                        },
                        orient: "vertical",
                        left: "left",
                        data: [
                            "天然气",
                            "煤炭",
                            "电力",
                            "原油"
                        ],
                        padding: [
                            45,
                            0,
                            0,
                            290
                        ]
                    },
                    series: [
                        {
                            name: "",
                            type: "pie",
                            center: ["40%", "46%"],
                            radius: [
                                "40%",
                                "55%"
                            ],
                            labelLine: {
                                normal: {
                                    show: "true",
                                    length: 10,
                                    length2: 55,
                                    lineStyle: {
                                        width: 1
                                    }
                                }
                            },
                            label: {
                                normal: {
                                    formatter: (params) => {
                                        //console.log(params);
                                        return '{per|' + params.percent.toFixed(2) + '%}' + '{c|\n' + params.value + '亿吨标煤' + '}'
                                    },
                                    borderRadius: 4,
                                    padding: [0, -50],
                                    height: 25,
                                    fontSize: 10,
                                    align: 'center',
                                    rich: {
                                        per: {
                                            fontSize: 12,
                                            fontWeight: "bold",
                                            color: '#9C9DA2'
                                        },
                                        c: {
                                            fontSize: 10,
                                            color: '#9C9DA2',
                                            padding: [7, -7],
                                            //height: 40,
                                        }
                                    }
                                }
                            },
                            data: [
                                {
                                    value: 45,
                                    name: "电力"
                                },
                                {
                                    value: 15,
                                    name: "天然气"
                                },
                                {
                                    value: 30,
                                    name: "煤炭"
                                },
                                {
                                    value: 10,
                                    name: "石油"
                                }
                            ]
                        }
                    ]
                },
                //分企业能源消费量  环形图
                energystructurefivebarecharts1: {
                    color: {
                        type: 'linear',  //线性渐变 radial径向渐变
                        x: 0, y: 0, x2: 0, y2: 1,
                        colorStops: [
                            {
                                offset: 0.3,
                                color: "#FF7C65" // 100% 处的颜色
                            },
                            {
                                offset: 1,
                                color: "#FF757A" // 100% 处的颜色
                            }],
                        globalCoord: false // 缺省为 false
                    },
                    textStyle: {
                        color: 'rgb(222,222,222)',
                    },
                    tooltip: {
                        confine:true,
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    grid: {
                        left: '5%',
                        right: '5%',
                        bottom: '10%',
                        top: '20%',
                        containLabel: true
                    },

                    xAxis: [{
                        name: "",
                        data: ["钢铁", "有色", "建材", "化工", "玻璃", "高新技术"],
                        axisTick: {
                            show: false
                        },
                        // x轴的字体样式
                        axisLabel: {
                            show: true,
                            interval: 0,
                            textStyle: {
                                color: '#AAB4C6',
                                fontSize: '10'
                            }
                        },
                        // 控制网格线是否显示
                        splitLine: {
                            show: false,
                            //  改变轴线颜色
                            lineStyle: {
                                // 使用深浅的间隔色
                                color: ['red']
                            }
                        },
                        // x轴的颜色和宽度
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: '#AAB4C6',
                                width: 1   //这里是坐标轴的宽度,可以去掉
                            }
                        }
                    }],
                    yAxis: [
                        {
                            type: 'value',
                            // max:500,
                            // min:0,
                            name: '万吨标煤',
                            nameTextStyle: {
                                fontSize: 10,
                                color: '#AAB4C6',
                                padding: [
                                    0,
                                    0,
                                    -5,
                                    -10
                                ]
                            },
                            interval: 100,
                            axisTick: {
                                show: false
                            },
                            // x轴的字体样式
                            axisLabel: {
                                show: true,
                                formatter: '{value}',
                                interval: 0,
                                textStyle: {
                                    color: '#AAB4C6',
                                    fontSize: '10'
                                }
                            },
                            // 控制网格线是否显示
                            splitLine: {
                                show: true,
                                //  改变轴线颜色
                                lineStyle: {
                                    // 使用深浅的间隔色
                                    width: 0.5,
                                }
                            },
                            // x轴的颜色和宽度
                            axisLine: {
                                show: true,
                                lineStyle: {
                                    color: '#AAB4C6',
                                    width: 1   //这里是坐标轴的宽度,可以去掉
                                }
                            }
                        }
                    ],
                    series: [
                        {
                            name: '能源消费量',
                            type: 'bar',
                            barGap: '10%',
                            barWidth: '20%',
                            barCategoryGap: '60%',
                            stack: 1,
                            //itemStyle: {
                            //   normal: {
                            //       barBorderRadius:[10,10,0,0],
                            //       color: '#12c3d9'
                            //   }
                            //  },
                            itemStyle: {
                                normal: {
                                    barBorderRadius: [10, 10, 0, 0],
                                    //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
                                }
                            },
                            data: [150,
                                320,
                                470,
                                300,
                                100,
                                200],
                            zlevel: 11,

                        }
                    ]
                },
                //分用户能源消费量  环形图
                energystructurefivebarecharts2: {
                    color: {
                        type: 'linear',  //线性渐变 radial径向渐变
                        x: 0, y: 0, x2: 0, y2: 1,
                        colorStops: [
                            {
                                offset: 0.3,
                                color: "#16CFEF" // 100% 处的颜色
                            },
                            {
                                offset: 1,
                                color: "#3796EF" // 100% 处的颜色
                            }],
                        globalCoord: false // 缺省为 false
                    },
                    textStyle: {
                        color: 'rgb(222,222,222)',
                    },
                    tooltip: {
                        confine:true,
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    grid: {
                        left: '5%',
                        right: '5%',
                        bottom: '10%',
                        top: '20%',
                        containLabel: true
                    },

                    xAxis: [{
                        name: "",
                        data: ["第一产业",
                            "第二产业",
                            "第三产业",
                            "居民"],
                        axisTick: {
                            show: false
                        },
                        // x轴的字体样式
                        axisLabel: {
                            show: true,
                            interval: 0,
                            textStyle: {
                                color: '#AAB4C6',
                                fontSize: '10'
                            }
                        },
                        // 控制网格线是否显示
                        splitLine: {
                            show: false,
                            //  改变轴线颜色
                            lineStyle: {
                                // 使用深浅的间隔色
                                color: ['red']
                            }
                        },
                        // x轴的颜色和宽度
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: '#AAB4C6',
                                width: 1   //这里是坐标轴的宽度,可以去掉
                            }
                        }
                    }],
                    yAxis: [
                        {
                            type: 'value',
                            // max:500,
                            // min:0,
                            name: '万吨标煤',
                            nameTextStyle: {
                                fontSize: 10,
                                color: '#AAB4C6',
                                padding: [
                                    0,
                                    0,
                                    -5,
                                    -10
                                ]
                            },
                            interval: 100,

                            axisTick: {
                                show: false
                            },
                            // x轴的字体样式
                            axisLabel: {
                                show: true,
                                formatter: '{value}',
                                interval: 0,
                                textStyle: {
                                    color: '#AAB4C6',
                                    fontSize: '10'
                                }
                            },
                            // 控制网格线是否显示
                            splitLine: {
                                show: true,
                                //  改变轴线颜色
                                lineStyle: {
                                    // 使用深浅的间隔色
                                    width: 0.5,
                                }
                            },
                            // x轴的颜色和宽度
                            axisLine: {
                                show: true,
                                lineStyle: {
                                    color: '#AAB4C6',
                                    width: 1   //这里是坐标轴的宽度,可以去掉
                                }
                            }
                        }
                    ],
                    series: [
                        {
                            name: '能源消费量',
                            type: 'bar',
                            barGap: '10%',
                            barWidth: '15%',
                            barCategoryGap: '60%',
                            stack: 1,
                            itemStyle: {
                                normal: {
                                    barBorderRadius: [10, 10, 0, 0],

                                }
                            },
                            data: [300,
                                450,
                                200,
                                300],


                        }
                    ]
                },
                //煤炭终端消费比重  柱状图
                energystructuresixbarecharts: {
                    color: {
                        type: 'linear',  //线性渐变 radial径向渐变
                        x: 0, y: 0, x2: 0, y2: 1,
                        colorStops: [
                            {
                                offset: 0.3,
                                color: "#74B0FF" // 100% 处的颜色
                            },
                            {
                                offset: 1,
                                color: "#7496FF" // 100% 处的颜色
                            }],
                        globalCoord: false // 缺省为 false
                    },
                    textStyle: {
                        color: 'rgb(222,222,222)',
                    },
                    tooltip: {
                        confine:true,
                        trigger: 'axis',
                        formatter: "{b}月<br/>{a} : {c}%",
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    grid: {
                        left: '0%',
                        right: '10%',
                        bottom: '5%',
                        top: '20%',
                        containLabel: true
                    },

                    xAxis: [{
                        name: '月',
                        show: true,
                        nameTextStyle: {
                            color: '#AAB4C6',
                            fontSize: 8,
                            padding: [24, 0, 0, -15]
                        },
                        data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
                        axisTick: {
                            show: false
                        },
                        // x轴的字体样式
                        axisLabel: {
                            show: true,
                            interval: 0,
                            textStyle: {
                                color: '#AAB4C6',
                                fontSize: '8'
                            }
                        },
                        // 控制网格线是否显示
                        splitLine: {
                            show: false,
                            //  改变轴线颜色
                            lineStyle: {
                                // 使用深浅的间隔色
                                color: ['red']
                            }
                        },
                        // x轴的颜色和宽度
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: '#DADADA',
                                width: 1   //这里是坐标轴的宽度,可以去掉
                            }
                        }
                    }],
                    yAxis: [
                        {
                            type: 'value',
                            // max:100,
                            // min:0,

                            // interval:25,
                            name: '%',
                            nameTextStyle: {
                                fontSize: 10,
                                color: '#AAB4C6',
                                padding: [0, 20, -10, 0]
                            },
                            axisTick: {
                                show: false
                            },
                            // x轴的字体样式
                            axisLabel: {
                                show: true,
                                formatter: '{value}',
                                interval: 0,
                                textStyle: {
                                    color: '#AAB4C6',
                                    fontSize: '8'
                                }
                            },
                            // 控制网格线是否显示
                            splitLine: {
                                show: true,
                                //  改变轴线颜色
                                lineStyle: {
                                    // 使用深浅的间隔色
                                    color: '#DADADA',
                                    width: 0.5,
                                }
                            },
                            // x轴的颜色和宽度
                            axisLine: {
                                show: true,
                                lineStyle: {
                                    color: '#DADADA',
                                    width: 1   //这里是坐标轴的宽度,可以去掉
                                }
                            }
                        }
                    ],
                    series: [
                        {
                            name: '消费比重',
                            center: ["50%", "50%"],
                            type: 'bar',
                            barGap: 5,
                            barWidth: 5,
                            barCategoryGap: '60%',
                            stack: 1,
                            itemStyle: {
                                normal: {
                                    barBorderRadius: [10, 10, 0, 0],
                                }
                            },
                            data: [75, 55, 50, 40, 70, 65, 35, 65, 75, 55, 50, 40],

                        }
                    ]
                },
            }
        },
        methods: {
            //接口 可再生能源装机比重
            renewable() {
                this.$axios.post("mengenergy-background/energyStructure/renewable").then(res => {
                        var data = res.data;
                        this.installRate11 = data.installedRate;
                        this.monthRate11 = data.sameCompared;
                        this.yearRate11 = data.sequentialCompared;
                        this.targetRate11 = data.target;
                        this.countryRate11 = data.countryRate;
                        this.percent11 = parseFloat(data.countryRate);
                        //this.EnergyStructureOnePerEcharts();
                        //红绿箭头功能
                        if (data.sameCompared >= 0) {
                            this.show11 = true;
                        } else {
                            this.show11 = false;
                        }
                        if (data.sequentialCompared >= 0) {
                            this.show12 = true;
                        } else {
                            this.show12 = false;
                        }
                    this.energystructureoneperecharts.series[0].data = data.tableDate
                        // for (var i = 0; i < data.tableDate.length; i++) {
                        //     this.energystructureoneperecharts.series[0].data[i].name = data.tableDate[i].type;
                        //     this.energystructureoneperecharts.series[0].data[i].value = data.tableDate[i].value;
                        // }
                        this.EnergyStructureOnePerEcharts();
                    });
            },
            //接口 煤炭生产占比
            coalProductMonthResult() {
                this.$axios.post("mengenergy-background/energyStructure/coalProductMonthResult").then(res => {

                        this.monthRate21 = res.data.sameCompared;
                        this.yearRate21 = res.data.sequentialCompared;
                        this.percent21 = parseFloat(res.data.countryRate);
                        this.wholeRate21 = res.data.installedRate;
                        this.targetRate21 = res.data.target;
                        this.countryRate21 = res.data.countryRate;
                    this.energystructuretwolineecharts.series[0].data = res.data.tableDate.yAxisData;
                    this.energystructuretwolineecharts.xAxis.data = res.data.tableDate.xAxisData;
                    this.EnergyStructureTwoLineEcharts();

                        //红绿箭头功能
                        if (res.data.sameCompared >= 0) {
                            this.show21 = true;
                        } else {
                            this.show21 = false;
                        }
                        if (res.data.sequentialCompared >= 0) {
                            this.show22 = true;
                        } else {
                            this.show22 = false;
                        }
                    });
            },
            //接口 火电装机占比
            fire() {
                this.$axios.post("mengenergy-background/energyStructure/fire").then(res => {

                        var data = res.data;
                        this.monthRate22 = data.sameCompared;
                        this.yearRate22 = data.sequentialCompared;
                        this.wholeRate22 = data.installedRate;
                        this.targetRate22 = data.target;
                        this.countryRate22 = data.countryRate;
                        this.percent22 = parseFloat(data.countryRate);
                        //红绿箭头功能
                        if (data.sameCompared >= 0) {
                            this.show31 = true;
                        } else {
                            this.show31 = false;
                        }
                        if (data.sequentialCompared >= 0) {
                            this.show32 = true;
                        } else {
                            this.show32 = false;
                        }
                            this.energystructuretwobarecharts.series[0].data = data.tableDate.yAxisData;
                            this.energystructuretwobarecharts.xAxis[0].data = data.tableDate.xAxisData;

                            this.EnergyStructureTwoBarEcharts();

                    });
            },
            //接口  分地区能源与消费数量
            energyByCity() {
                this.$axios.post("mengenergy-background/energyConstruction/energyByCity").then(res => {

                        var data = res.data;
                        var sum=[];
                        var product;
                        var sale;

                            this.energystructurethreebarecharts1.yAxis[0].data = data.energyStructureByCity.yAxisData;
                            this.energystructurethreebarecharts1.series[0].data = data.energyStructureByCity.coal;
                            this.energystructurethreebarecharts1.series[1].data = data.energyStructureByCity.gas;
                            this.energystructurethreebarecharts1.series[2].data = data.energyStructureByCity.oil;
                            this.energystructurethreebarecharts1.series[3].data = data.energyStructureByCity.electric;
                            this.energystructurethreebarecharts1.series[4].data = data.energyStructureByCity.coalSales;
                            this.energystructurethreebarecharts1.series[5].data = data.energyStructureByCity.gasSales;
                            this.energystructurethreebarecharts1.series[6].data = data.energyStructureByCity.oilSales;
                            this.energystructurethreebarecharts1.series[7].data = data.energyStructureByCity.electricSales;
                            for(let i=0;i<data.energyStructureByCity.coal.length;i++){
                                product = data.energyStructureByCity.coal[i]+data.energyStructureByCity.gas[i]+data.energyStructureByCity.oil[i]+data.energyStructureByCity.electric[i];
                                sale = data.energyStructureByCity.coalSales[i]+data.energyStructureByCity.gasSales[i]+data.energyStructureByCity.oilSales[i]+data.energyStructureByCity.electricSales[i];
                                sum.push(product.toFixed(2),sale.toFixed(2))
                            }
                            this.energystructurethreebarecharts1.yAxis[1].data= sum;

                            this.EnergyStructureThreeBarEcharts1();

                    });
            },
            //接口 分企业能源生产量
            energyByGroup() {
                this.$axios.post("mengenergy-background/energyConstruction/energyByGroup").then(res => {
                        var sumData;
                        var sum=[];
                            this.energystructurethreebarecharts2.yAxis[0].data = res.data.energyStructureByGroup.name;
                            this.energystructurethreebarecharts2.series[0].data = res.data.energyStructureByGroup.coal;
                            this.energystructurethreebarecharts2.series[1].data = res.data.energyStructureByGroup.gas;
                            this.energystructurethreebarecharts2.series[2].data = res.data.energyStructureByGroup.oil;
                            this.energystructurethreebarecharts2.series[3].data = res.data.energyStructureByGroup.electric;

                                for(let j=0;j<res.data.energyStructureByGroup.coal.length;j++){
                                    sumData = res.data.energyStructureByGroup.coal[j]+res.data.energyStructureByGroup.gas[j]+res.data.energyStructureByGroup.oil[j]+res.data.energyStructureByGroup.electric[j];
                                    sum.push(sumData.toFixed(2))
                                }

                            this.energystructurethreebarecharts2.yAxis[1].data = sum;
                            this.EnergyStructureThreeBarEcharts2();
                        })

            },
            //接口 一次能源生产概况
            energyYield() {
                this.$axios.post("mengenergy-background/energyConstruction/energyYield").then(res => {

                        var data = res.data.oilGasProportion;
                        for (var i = 0; i < data.length; i++) {
                            this.energystructurefourperecharts.series[0].data[i].name = data[i].name;
                            this.energystructurefourperecharts.series[0].data[i].value = data[i].value;
                        }
                        this.EnergyStructureFourPerEcharts();
                    });
            },
            //接口 分品种能源消费量
            energySales() {
                this.$axios.post("mengenergy-background/energyConstruction/energySales").then(res => {

                        var data = res.data.oilGasProportion;
                        for (var i = 0; i < data.length; i++) {
                            this.energystructurefiveperecharts.series[0].data[i].name = data[i].name;
                            this.energystructurefiveperecharts.series[0].data[i].value = data[i].value;
                        }
                        this.EnergyStructureFivePerEcharts();
                    });
            },
            //接口 分行业能源消费量
            resourcesIndustry() {
                this.$axios.post("mengenergy-background/energyConstruction/resourcesIndustry").then(res => {
                        var data = res.data.resourcesIndustry;
                            this.energystructurefivebarecharts1.xAxis[0].data = data.xAxisData;
                            this.energystructurefivebarecharts1.series[0].data = data.yAxisData;
                            this.EnergyStructureFiveBarEcharts1();

                    });
            },
            //接口 分用户能源消费量
            differentiationSales() {
                this.$axios.post("mengenergy-background/energyConstruction/differentiationSales").then(res => {
                        var data = res.data.fourResourcesIndustry;
                            this.energystructurefivebarecharts2.xAxis[0].data = data.xAxisData;
                            this.energystructurefivebarecharts2.series[0].data = data.yAxisData;
                            this.EnergyStructureFiveBarEcharts2();

                    });
            },
            //接口 电力占终能源消费比重
            consumption() {
                this.$axios.post("mengenergy-background/energyStructure/consumption").then(res => {

                        var data = res.data;
                        this.installRate61 = data.installedRate;
                        this.monthRate61 = data.sameCompared;
                        this.yearRate61 = data.countryRate;
                        this.paiming = data.countryRank;
                        //红绿箭头功能
                        if (data.sameCompared >= 0) {
                            this.show41 = true;
                        } else {
                            this.show41 = false;
                        }
                    });
            },
            //接口 煤炭终端消费比重  同比 环比
            coalTerminalMonthResult() {
                this.$axios.post("mengenergy-background/energyStructure/coalTerminalMonthResult").then(res => {

                        var data = res.data;
                        this.monthRate62 = data.sameCompared;
                        this.yearRate62 = data.sequentialCompared;
                        this.wholeRate62 = data.installedRate;
                        this.targetRate62 = data.target;
                        this.countryRate62 = data.countryRate;
                        this.percent62 = parseFloat(data.countryRate);
                        //红绿箭头功能
                        if (data.sameCompared >= 0) {
                            this.show51 = true;
                        } else {
                            this.show51 = false;
                        }
                        if (data.sequentialCompared >= 0) {
                            this.show52 = true;
                        } else {
                            this.show52 = false;
                        }

                        this.energystructuresixbarecharts.series[0].data = data.tableDate.yAxisData;
                        this.energystructuresixbarecharts.xAxis[0].data = data.tableDate.xAxisData;

                        this.EnergyStructureSixBarEcharts();

                    });
            },





            //可再生能源装机比重 环形图
            EnergyStructureOnePerEcharts() {
                let myChart = this.$echarts.init(document.getElementById("energystructureoneperecharts"));
                myChart.setOption(this.energystructureoneperecharts);
            },
            //煤炭生产占比  折线图
            EnergyStructureTwoLineEcharts() {
                let myChart = this.$echarts.init(document.getElementById("energystructuretwolineecharts"));
                myChart.setOption(this.energystructuretwolineecharts);
            },
            //火电装机占比 柱状图
            EnergyStructureTwoBarEcharts() {
                let myChart = this.$echarts.init(document.getElementById("energystructuretwobarecharts"));
                myChart.setOption(this.energystructuretwobarecharts);
            },
            //分地区能源与消费数量 横向柱状图
            EnergyStructureThreeBarEcharts1() {
                let myChart = this.$echarts.init(document.getElementById("energystructurethreebarecharts1"));
                myChart.setOption(this.energystructurethreebarecharts1);
            },
            //分企业能源生产量  横向柱状图
            EnergyStructureThreeBarEcharts2() {
                let myChart = this.$echarts.init(document.getElementById("energystructurethreebarecharts2"));
                myChart.setOption(this.energystructurethreebarecharts2);
            },
            //一次能源生产概况  环形图
            EnergyStructureFourPerEcharts() {
                let myChart = this.$echarts.init(document.getElementById("energystructurefourperecharts"));
                myChart.setOption(this.energystructurefourperecharts);
            },
            //分品种能源消费量  环形图
            EnergyStructureFivePerEcharts() {
                let myChart = this.$echarts.init(document.getElementById("energystructurefiveperecharts"));
                myChart.setOption(this.energystructurefiveperecharts);
            },
            //分企业能源消费量  环形图
            EnergyStructureFiveBarEcharts1() {
                let myChart = this.$echarts.init(document.getElementById("energystructurefivebarecharts1"));
                myChart.setOption(this.energystructurefivebarecharts1);
            },
            //分用户能源消费量  环形图
            EnergyStructureFiveBarEcharts2() {
                let myChart = this.$echarts.init(document.getElementById("energystructurefivebarecharts2"));
                myChart.setOption(this.energystructurefivebarecharts2);
            },
            //煤炭终端消费比重  柱状图
            EnergyStructureSixBarEcharts() {
                let myChart = this.$echarts.init(document.getElementById("energystructuresixbarecharts"));
                myChart.setOption(this.energystructuresixbarecharts);
            },
        },
        mounted() {
            this.renewable()
            this.coalProductMonthResult()
            this.fire()
            this.energyByCity()
            this.energyByGroup()
            this.energyYield()
            this.energySales()
            this.resourcesIndustry()
            this.differentiationSales()
            this.consumption()
            this.coalTerminalMonthResult()
        }
    }
</script>
<style lang="scss">
    #energy-structure {
        width: 100%;
        background-color:#DBDBDB;
        position: relative;

        .energy-structure-one {
            width: 100%;
            height: 4rem;
            //border-radius: 0.08rem;
            background-color:#fff;
            margin-bottom: 0.2rem;
            //border: 1px solid #DADBDB;
            //position: absolute;
            border-bottom-width: 0.08rem;
            display: flex;
            flex-direction: row;
            justify-content: space-around;
            align-items: center;

            .one0 {
                height: 4rem;
                width: 55%;

                .one1 {
                    font-weight: bold;
                    font-family: MicrosoftYaHei;
                    color: #3A4665;
                    font-size: 12px;
                    padding-top: .4rem;
                    padding-left: .2rem;
                }

                .one2 {
                    display: flex;
                    flex-direction: row;
                    justify-content: flex-start;
                    align-items: center;

                    .one3 img {
                        width: .9rem;
                        height: .9rem;
                        margin-left: .23rem !important;
                        margin-top: .55rem !important;
                    }

                    .one4 {
                        margin-top: .35rem !important;
                        margin-left: .3rem !important;
                        font-size: 9.98px;
                        font-family: MicrosoftYaHeiLight;
                        color: #2C3751;
                        font-weight: lighter;
                    }
                }

                .one5 {
                    font-size: 9.98px;
                    font-family: MicrosoftYaHeiLight;
                    color: #2C3751;
                    font-weight: lighter;

                    p {
                        margin-top: 0.15rem;

                        > span:first-child {
                            font-family: QanelasSoft-SemiBold;
                            font-weight: bold;
                            font-size: 16px;
                            margin-left: .3rem;
                        }
                    }
                }

                .one6 {
                    font-size: 9.98px;
                    font-family: MicrosoftYaHeiLight;
                    color: #2C3751;
                    font-weight: lighter;
                    margin-left: .3rem;

                    p {
                        margin-top: 0.2rem;
                    }
                }
            }

            .one7 {
                height: 4rem;
                width: 45%;
            }

        }

        .energy-structure-two {
            width: 100%;
            height: 4rem;
            //border: 1px solid #DADBDB;
            background-color:#fff;
            margin-bottom: 0.2rem;
            .tab {
                padding-top: .3rem;
            }

            .van-tab {
                height: .54rem !important;
                line-height: .54 srem !important;
                background: #fff;
                color: rgb(35, 107, 214);
                font-size: 12px;
                border-radius: .02rem;
                border: 1px solid rgb(35, 107, 214) !important;
                // font-weight: 600;
            }

            .van-tabs__nav--card {
                border: 0px;
            }

            .van-tab--active {
                font-size: 12px;
                // font-weight: 600;
                background: rgb(35, 107, 214);
                color: #fff;
                border: 1px solid rgb(35, 107, 214) !important;
                height: .54rem !important;
                line-height: .54rem !important;
                border-radius: .02rem;
            }

            .two00 {
                display: flex;
                flex-direction: row;
                justify-content: space-around;
                align-items: center;

                .two0 {
                    height: 3rem;
                    width: 55%;

                    .two1 {
                        display: flex;
                        flex-direction: row;
                        justify-content: flex-start;
                        align-items: center;

                        .two2 {
                            width: .9rem !important;
                            height: .9rem !important;
                            background-color: #E7FFE3;
                            margin-left: .3rem;
                            margin-top: .45rem;

                            > img {
                                width: .9rem;
                                height: .9rem;
                            }
                        }

                        .two3 {
                            margin-top: .4rem !important;
                            margin-left: .3rem !important;
                            font-size: 9.98px;
                            font-family: MicrosoftYaHeiLight;
                            color: #2C3751;
                            font-weight: lighter;
                        }
                    }

                    .two4 {
                        font-size: 9.98px;
                        font-family: MicrosoftYaHeiLight;
                        color: #2C3751;
                        font-weight: lighter;

                        p {
                            margin-top: .2rem;

                            > span:first-child {
                                font-family: QanelasSoft-SemiBold;
                                font-weight: bold;
                                font-size: 16px;
                                margin-left: .3rem;
                            }
                        }
                    }

                    .two5 {
                        font-size: 9.98px;
                        font-family: MicrosoftYaHeiLight;
                        color: #2C3751;
                        font-weight: lighter;
                        margin-left: .3rem;

                        p {
                            margin-top: .2rem;
                        }
                    }
                }

                .two6 {
                    height: 3rem;
                    width: 45%;
                }
            }

            .two01 {
                display: flex;
                flex-direction: row;
                justify-content: space-around;
                align-items: center;

                .two7 {
                    height: 3rem;
                    width: 55%;

                    .two8 {
                        display: flex;
                        flex-direction: row;
                        justify-content: flex-start;
                        align-items: center;

                        .two9 img {
                            width: .9rem;
                            height: .9rem;
                            margin-left: .3rem !important;
                            margin-top: .45rem !important;
                        }

                        .two10 {
                            margin-top: .4rem !important;
                            margin-left: .3rem !important;
                            font-size: 9.98px;
                            font-family: MicrosoftYaHeiLight;
                            color: #2C3751;
                            font-weight: lighter;
                        }
                    }

                    .two11 {
                        font-size: 9.98px;
                        font-family: MicrosoftYaHeiLight;
                        color: #2C3751;
                        font-weight: lighter;

                        p {
                            margin-top: .17rem;

                            > span:first-child {
                                font-family: QanelasSoft-SemiBold;
                                font-weight: bold;
                                font-size: 16px;
                                margin-left: .3rem;
                            }
                        }
                    }

                    .two12 {
                        font-size: 9.98px;
                        font-family: MicrosoftYaHeiLight;
                        color: #2C3751;
                        font-weight: lighter;
                        margin-left: .3rem;

                        p {
                            margin-top: .2rem;
                        }
                    }
                }

                .two13 {
                    height: 3rem;
                    width: 3.3568rem
                }
            }
        }

        .energy-structure-three {
            width: 100%;
            height: 6.44rem;
            background-color:#fff;
            margin-bottom: 0.2rem;

            .tab {
                padding-top: .3rem;
            }

            .van-tab {
                height: .54rem !important;
                line-height: .54rem !important;
                background: #fff;
                color: rgb(35, 107, 214);
                font-size: 12px;
                border-radius: .02rem;
                border: 1px solid rgb(35, 107, 214);
                // font-weight: 600;
            }

            .van-tabs__nav--card {
                border: 0px;
            }

            .van-tab--active {
                font-size: 12px;
                // font-weight: 600;
                background: rgb(35, 107, 214);
                color: #fff;
                height: .54rem !important;
                line-height: .54rem !important;
                border-radius: .02rem;
            }

            > div:nth-child(2) {
                > div:first-child {
                    display: flex;
                    flex-direction: row;
                    justify-content: flex-end;
                    align-items: center;
                    font-size: 8px !important;
                    font-family: "MicrosoftYaHei";
                    font-weight: lighter;
                    color: #9C9DA2;
                    margin-top: .2rem;
                    margin-right: .3rem;

                    li {
                        width: 3.5rem;
                        display: flex;
                        justify-content: space-between;
                        align-items: center;

                        > p {
                            > span {
                                display: inline-block;
                                width: 8px;
                                height: 6px;
                                background: red;
                                background-size: 8px 8px;
                                margin-bottom: 1px;
                                padding-left: 10px;
                            }
                        }
                    }
                }

                > div:last-child {
                    width: 100%;
                    height: 4.85rem;
                }
            }

            .bar2 {
                width: 7.5rem;
                height: 5.5rem;
            }
        }

        .energy-structure-four {
            > div:first-child {
                width: 7.5rem;
                height: 4rem;
                background-color:#fff;
                margin-bottom: 0.2rem;
            }
        }

        .energy-structure-five {
            width: 7.5rem;
            height: 4.64rem;
            background-color:#fff;
            margin-bottom: 0.2rem;

            .tab {
                padding-top: .3rem;
            }

            .van-tab {
                height: .54rem !important;
                line-height: .54rem !important;
                background: #fff;
                color: rgb(35, 107, 214);
                font-size: 12px;
                border-radius: .02rem;
                border: 1px solid rgb(35, 107, 214);
                // font-weight: 600;
            }

            .van-tabs__nav--card {
                border: 0px;
            }

            .van-tab--active {
                font-size: 12px;
                // font-weight: 600;
                background: rgb(35, 107, 214);
                color: #fff;
                height: .54rem !important;
                line-height: .54rem !important;
                border-radius: .02rem;
            }

            .per {
                width: 7.5rem;
                height: 3.74rem;
            }

            .bar1 {
                width: 7.5rem;
                height: 3.74rem;
            }

            .bar2 {
                width: 7.5rem;
                height: 3.74rem;
            }
        }

        .energy-structure-six {
            width: 7.5rem;
            height: 4rem;
            background-color:#fff;
            //margin-bottom: 0.16rem;

            .tab {
                padding-top: .3rem;
            }

            .van-tab {
                height: .54rem !important;
                line-height: .54rem !important;
                background: #fff;
                color: rgb(35, 107, 214);
                font-size: 12px;
                border-radius: .02rem;
                border: 1px solid rgb(35, 107, 214);
                // font-weight: 600;
            }

            .van-tabs__nav--card {
                border: 0px;
            }

            .van-tab--active {
                font-size: 12px;
                // font-weight: 600;
                background: rgb(35, 107, 214);
                color: #fff;
                height: .54rem !important;
                line-height: .54rem !important;
                border-radius: .02rem;
            }

            .six01 {
                display: flex;
                flex-direction: row;
                justify-content: space-around;
                align-items: center;

                .six7 {
                    height: 3rem;
                    width: 55%;

                    .six8 {
                        display: flex;
                        flex-direction: row;
                        justify-content: flex-start;
                        align-items: center;

                        .six9 img {
                            width: .9rem;
                            height: .9rem;
                            margin-left: .23rem !important;
                            margin-top: .45rem !important;
                        }

                        .six10 {
                            margin-top: .4rem !important;
                            margin-left: .3rem !important;
                            font-size: 9.98px;
                            font-family: MicrosoftYaHeiLight;
                            color: #2C3751;
                            font-weight: lighter;
                        }
                    }

                    .six11 {
                        font-size: 9.98px;
                        font-family: MicrosoftYaHeiLight;
                        color: #2C3751;
                        font-weight: lighter;

                        p {
                            margin-top: 0.17rem;

                            > span:first-child {
                                font-family: QanelasSoft-SemiBold;
                                font-weight: bold;
                                font-size: 16px;
                                margin-left: .3rem;
                            }
                        }
                    }

                    .six12 {
                        font-size: 9.98px;
                        font-family: MicrosoftYaHeiLight;
                        color: #2C3751;
                        font-weight: lighter;
                        margin-left: .3rem;

                        p {
                            margin-top: 0.2rem;
                        }
                    }
                }

                .six13 {
                    height: 3rem;
                    width: 3.3568rem;
                }
            }

            .six0 {
                display: flex;
                flex-direction: row;
                justify-content: space-around;
                align-items: center;
                height: 3rem;
                width: 7.5rem;

                .six1 {
                    display: flex;
                    flex-direction: row;
                    justify-content: flex-start;
                    align-items: center;
                    height: 3rem;
                    width: 50%;

                    .six2 {
                        display: inline-block;
                        width: .9rem !important;
                        height: .9rem !important;
                        background-color: #FFF7D9;
                        margin-left: .2rem;

                        > img {
                            margin-left: .25rem;
                            margin-top: .2rem;
                        }
                    }

                    .six3 {
                        .p1 {
                            font-family: QanelasSoft-SemiBold;
                            font-weight: bold;
                            font-size: 22.45px;
                            margin-left: .8rem;
                        }

                        .p2 {
                            //-webkit-transform: scale(0.8);
                            font-size: 9px;
                            font-family: MicrosoftYaHeiLight;
                            color: #2C3751;
                            font-weight: lighter;
                            //margin-left: .3rem;
                        }
                    }
                }

                .six4 {
                    height: 3rem;
                    width: 50%;
                    font-size: 9.98px;
                    font-family: MicrosoftYaHeiLight;
                    color: #2C3751;
                    font-weight: lighter;

                    .six5 {
                        height: 2.2rem;
                        width: 3rem;
                        background-color: #E6E9EE;
                        margin: auto;
                        margin-top: .35rem;

                        .six6 {
                            padding-top: .5rem;
                            margin-left: .4rem;
                        }
                    }
                }
            }
        }
    }
</style>
